<template>
  <div>
    <el-tooltip effect="dark" content="点击复制文本" placement="top" v-if="data || data === 0">
      <span v-html="proxy.$decodeHtmlEntities(keyword)" class="copyHtml" @click="proxy.$copy(data)"></span>
    </el-tooltip>
    <span v-else class="text-color-text">{{ placeholder || '暂无数据' }}</span>
    <span v-if="unit" class="m-l-2 text-color-text">{{ unit }}</span>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    placeholder?: string;
    unit?: string;
    options?: any;
    labeName?: string;
    valueName?: string;
  }>(),
  {
    placeholder: '--',
    valueName: 'value',
    labeName: 'label',
  },
);
const keyword = computed(() => {
  if (props.options) {
    return proxy.$arrFind(props.options, props.data, props.valueName, props.labeName) || props.data
  } else {
    return props.data
  }
});
onMounted(() => { });
onUnmounted(() => { });
</script>
<style scoped lang="scss">
.copyHtml {
  line-height: 1.68em;
  margin: 4px 0 0;
  white-space: pre-wrap;
  cursor: pointer;

  &:hover {
    color: $primary;
  }
}
</style>
